<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>📝 Vue | 😯欢迎Echo🥳</title>
    <meta name="description" content="笔记记录.">
    <link rel="stylesheet" href="/vitepress-notes/assets/style.482f7341.css">
    <link rel="modulepreload" href="/vitepress-notes/assets/chunks/show.6497df66.js">
    <link rel="modulepreload" href="/vitepress-notes/assets/app.04fdf0c1.js">
    <link rel="modulepreload" href="/vitepress-notes/assets/notes_Vue.md.8797bdcd.lean.js">
    
    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-6b5fd0a9><!--[--><!--]--><!--[--><span tabindex="-1" data-v-45f6ae50></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-45f6ae50> Skip to content </a><!--]--><!----><header class="VPNav" data-v-6b5fd0a9 data-v-0e356168><div class="VPNavBar has-sidebar" data-v-0e356168 data-v-8856f192><div class="container" data-v-8856f192><div class="VPNavBarTitle has-sidebar" data-v-8856f192 data-v-6a6f7ff6><a class="title" href="/vitepress-notes/" data-v-6a6f7ff6><!----><!--[-->😯欢迎Echo🥳<!--]--></a></div><div class="content" data-v-8856f192><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-8856f192 data-v-a30758ee><span id="main-nav-aria-label" class="visually-hidden" data-v-a30758ee>Main Navigation</span><!--[--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-a30758ee data-v-8dccea88><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8dccea88><span class="text" data-v-8dccea88><!----> 📁 文档 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8dccea88><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-8dccea88><div class="VPMenu" data-v-8dccea88 data-v-e73581a2><div class="items" data-v-e73581a2><!--[--><!--[--><div class="VPMenuGroup" data-v-e73581a2 data-v-4bc84c0d><p class="title" data-v-4bc84c0d>框架文档</p><!--[--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://react.docschina.org/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->React<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://v3.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Vue3<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://vitejs.cn/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Vite<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.angularjs.net.cn/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Angular<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://nodejs.org/en/docs/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->NodeJS<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.eggjs.org/zh-CN" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Egg<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://koa.bootcss.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Koa<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.expressjs.com.cn/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Express<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.electronjs.org/zh/docs/latest/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Electron<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://www.ionic.wang/components_doc-index.html" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Ionic<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://taro-docs.jd.com/taro/docs/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Taro<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://uniapp.dcloud.io/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Uniapp<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://reactnative.cn/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->React Native<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.webpackjs.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Webpack<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="hhttps://www.rollupjs.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Rollup<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://jquery.cuishifeng.cn/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Jquery API<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://bootstrapcreative.com/resources/bootstrap-4-css-classes-index/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Bootstrap<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.axios-http.cn/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Axios<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.lodashjs.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Lodash<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://mongoosejs.com/docs/guide.html" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Mongoose<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://zhaoqize.github.io/puppeteer-api-zh_CN" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Puppeteer<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.sass.hk/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Sass<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://less.bootcss.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Less<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e73581a2 data-v-4bc84c0d><p class="title" data-v-4bc84c0d>文档教程</p><!--[--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://devdocs.io/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Devdocs有可能是全球最全的文档库<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://javascript.ruanyifeng.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->JavaScript 标准参考教程<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://es6.ruanyifeng.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->ES6 入门教程<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.typescriptlang.org/zh/tsconfig" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Typscript中文文档<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.canvasapi.cn/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Canvas API中文<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://git-scm.com/book/zh/v2" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Git中文手册<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e73581a2 data-v-4bc84c0d><p class="title" data-v-4bc84c0d>UI组件</p><!--[--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://ant.design" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Ant Design React<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.antdv.com/components/overview" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Ant Design Vue<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://pro.ant.design/zh-CN/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Ant Design Pro<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://procomponents.ant.design/components" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->ProComponents<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://tdesign.tencent.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->腾讯Tdesign<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://nutui.jd.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->NutUI京东风格的轻量级移动端 Vue 组件库<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://semantic-ui-vue.github.io/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Semantic UI Vue<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://didi.github.io/cube-ui/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Cube UI Vue滴滴<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.iviewui.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Iview UI<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://vant-contrib.gitee.io/vant/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->有赞Vant Vue3<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://youzan.github.io/vant-weapp" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->有赞Vant 小程序<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://element-plus.gitee.io/zh-CN/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Element UI Vue3<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e73581a2 data-v-4bc84c0d><p class="title" data-v-4bc84c0d>可视化</p><!--[--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://antv.gitee.io/zh/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Antv<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.bizcharts.net/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Bizcharts<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://threejs.org/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Threejs<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://d3js.org/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->D3js<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.highcharts.com.cn/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Highcharts<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://echarts.apache.org/zh/index.html" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Echarts<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e73581a2 data-v-4bc84c0d><p class="title" data-v-4bc84c0d>配置相关</p><!--[--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://cn.eslint.org/docs/user-guide/getting-started" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->ESLint<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.babeljs.cn/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Babel<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.nginx.cn/doc/index.html" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Nginx中文文档<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://docs.github.com/cn/actions" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Github Action中文<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://docs.docker.com/get-started/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Docker官方文档<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.jenkins.io/zh/doc/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Jenkins官方文档<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-a30758ee data-v-8dccea88><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8dccea88><span class="text" data-v-8dccea88><!----> ⚒️ 工具 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8dccea88><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-8dccea88><div class="VPMenu" data-v-8dccea88 data-v-e73581a2><div class="items" data-v-e73581a2><!--[--><!--[--><div class="VPMenuLink" data-v-e73581a2 data-v-06b18c43><a class="VPLink link" href="https://nav.poetries.top/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->前端综合导航<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e73581a2 data-v-4bc84c0d><p class="title" data-v-4bc84c0d>实用工具</p><!--[--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://regexr.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线正则表达式调试工具<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://jex.im/regulex/#!flags=&amp;re=%5E(a%7Cb)*%3F%24" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线正则表达式可视化<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://any86.github.io/any-rule/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->常用正则表达式大全<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://latentflip.com/loupe" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->可以在线看代码流程的网站：loupe<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.zxgj.cn/g/md5" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线MD5编码工具<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://jwt.calebb.net/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线JWT解码工具<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.json.cn/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线JSON解析<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.fly63.com/tool/textdiff/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线文本比对<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://prettier.io/playground/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线JS代码格式化<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.zxgj.cn/g/sqlformat" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线SQL压缩格式化<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.zxgj.cn/g/xmlformat" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线XML压缩格式化<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.zxgj.cn/g/unix" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线时间戳转化工具<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.zxgj.cn/g/yansezhi" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线RGB颜色转化工具<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.fly63.com/php/http/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线HTTP在线接口测试工具<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.ipip.net/ip.html" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线IP地址查询<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://c.runoob.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线菜鸟综合导航工具<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e73581a2 data-v-4bc84c0d><p class="title" data-v-4bc84c0d>在线编程</p><!--[--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://www.mipcode.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->MipCode快速的在线代码创作工具<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://codepen.io/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Codepen<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://jsbin.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Jsbin<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://codesandbox.io/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->CodeSandBox在线快速学习React/Vue<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://sfc.vuejs.org/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Vue SFC Playground<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.sveltejs.cn/examples#hello-world" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Svelte Playground<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://babeljs.io/repl" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线尝试Babel编译<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.tslang.cn/play/index.html" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Typescript在线编译<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://astexplorer.net/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->AST可视化编辑<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://rollupjs.org/repl/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->在线尝试Rollup打包<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://prettier.io/playground/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Prettier Playground<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://stackblitz.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Stackblitz基于VSCODE的WEBIDE<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://npm.runkit.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->NPM Runkit在浏览器中快速学习及尝试Node.js模块<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://labs.play-with-docker.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Play with Docker在线体验<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e73581a2 data-v-4bc84c0d><p class="title" data-v-4bc84c0d>CSS相关</p><!--[--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://cssvalues.com/?view=css3" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->用来帮助大家查找CSS的相关属性的语法，以及使用方法<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://caniuse.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->提供了CSS相关属性的浏览器兼容表，同时提供了对应属性资源<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://flexboxfroggy.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Flex在线动态练习<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://cubic-bezier.com/#.17,.67,.83,.67" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->贝塞尔曲线生成工具<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.sassmeister.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->SCSS在线转CSS<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://tools.jb51.net/static/api/css3path/index.html" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Clip-path在线生成器<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://animate.style/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Animate.css动画效果<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://animista.net/play/basic/scale-up" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->按需定制CSS动画效果<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://www.blooberry.com/indexdot/css/propindex/all.htm" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->一份清单，按字母表顺序列出了每个CSS属性<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.bestcssbuttongenerator.com/#/37" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->CSS按钮生成器<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://fian.my.id/Waves/#examples" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->Css3按钮动画<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://www.colorzilla.com/gradient-editor" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->CSS3渐变样式生成器，类似Photoshop中的渐变界面<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://www.css3maker.com" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->CSS3 Maker可在线演示渐变阴影旋转动画并生成代码<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://westciv.com/tools/gradients" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->CSS3 Tool非常方便的生成背景渐变、阴影、旋转和边框圆角效果<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.svgbackgrounds.com/#rose-petals" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->SVG背景生成<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://www.toptal.com/developers/css/sprite-generator" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->多张图片合成雪碧图<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://tobiasahlin.com/spinkit/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->汇集了实现各种加载效果的CSS代码片段<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://yoksel.github.io/svg-filters/#/docs" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->SVG滤镜<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://www.html5star.com/manual/html5label-meaning/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->HTML5 元素标签含义大全(元素周期表)<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://justineo.github.io/slideshows/semantic-html" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->HTML语义化<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://renzhezhilu.gitee.io/kakacss/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->KakaCss快速生成Css样式，在任意网站复制内容，再到本页面Ctrl+V<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://css.doyoe.com/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->CSS参考手册<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="http://loading.io/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->各种各样的loading效果<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://neumorphism.io/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->CSS shadow generator<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://shadows.brumm.af/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->通过拖拽的形式生成需要的border radius<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://9elements.github.io/fancy-border-radius/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->花式半径生成器-通过拖拽的形式生成需要的border radius<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-4bc84c0d data-v-06b18c43><a class="VPLink link" href="https://cssgrid-generator.netlify.app/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->cssgrid-generator<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-a30758ee data-v-8dccea88><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8dccea88><span class="text" data-v-8dccea88><!----> ⚒️ 前端资源 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8dccea88><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-8dccea88><div class="VPMenu" data-v-8dccea88 data-v-e73581a2><div class="items" data-v-e73581a2><!--[--><!--[--><div class="VPMenuLink" data-v-e73581a2 data-v-06b18c43><a class="VPLink link" href="https://panjiachen.github.io/awesome-bookmarks/repository/" target="_blank" rel="noopener noreferrer" data-v-06b18c43 data-v-5704c677><!--[-->前端常用资源<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-5704c677><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-8856f192 data-v-311055f2><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-311055f2 data-v-781f9d1b data-v-1dda4c9c><span class="check" data-v-1dda4c9c><span class="icon" data-v-1dda4c9c><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-781f9d1b><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-781f9d1b><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-8856f192 data-v-0562f5c0 data-v-8dccea88><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8dccea88><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8dccea88><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-8dccea88><div class="VPMenu" data-v-8dccea88 data-v-e73581a2><!----><!--[--><!--[--><!----><div class="group" data-v-0562f5c0><div class="item appearance" data-v-0562f5c0><p class="label" data-v-0562f5c0>Appearance</p><div class="appearance-action" data-v-0562f5c0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-0562f5c0 data-v-781f9d1b data-v-1dda4c9c><span class="check" data-v-1dda4c9c><span class="icon" data-v-1dda4c9c><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-781f9d1b><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-781f9d1b><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-8856f192 data-v-6f008456><span class="container" data-v-6f008456><span class="top" data-v-6f008456></span><span class="middle" data-v-6f008456></span><span class="bottom" data-v-6f008456></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-6b5fd0a9 data-v-92b0f14a><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-92b0f14a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-92b0f14a><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-92b0f14a>Menu</span></button><a class="top-link" href="#" data-v-92b0f14a> Return to top </a></div><aside class="VPSidebar" data-v-6b5fd0a9 data-v-55e4c7db><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-55e4c7db><span class="visually-hidden" id="sidebar-aria-label" data-v-55e4c7db> Sidebar Navigation </span><!--[--><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>📁 我的笔记</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/vitepress-notes/notes/Git.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>📝 Git</span><!--]--><!----></a><a class="VPLink link" href="/vitepress-notes/notes/Html-Css.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>📝 Html/Css</span><!--]--><!----></a><a class="VPLink link" href="/vitepress-notes/notes/Js.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>📝 Js</span><!--]--><!----></a><a class="VPLink link active" href="/vitepress-notes/notes/Vue.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>📝 Vue</span><!--]--><!----></a><a class="VPLink link" href="/vitepress-notes/notes/Webpack.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>📝 Webpack</span><!--]--><!----></a><a class="VPLink link" href="/vitepress-notes/notes/uniapp.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>📝 uni-app</span><!--]--><!----></a><a class="VPLink link" href="/vitepress-notes/notes/%E6%AD%A3%E5%88%99.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>📝 正则表达式</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>📁 面试大全</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/vitepress-notes/notes/%E9%9D%A2%E8%AF%95%E9%A2%98%E5%A4%A7%E5%85%A8.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>📝 面试题大全</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>📁 前端资料</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/vitepress-notes/notes2/Html.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>📝 Html效果</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-6b5fd0a9 data-v-a4c57a06><div class="VPDoc has-sidebar" data-v-a4c57a06 data-v-79ca2460><div class="container" data-v-79ca2460><div class="aside" data-v-79ca2460><div class="aside-curtain" data-v-79ca2460></div><div class="aside-container" data-v-79ca2460><div class="aside-content" data-v-79ca2460><div class="VPDocAside" data-v-79ca2460 data-v-779d834d><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-779d834d data-v-51e5a8ce><div class="content" data-v-51e5a8ce><div class="outline-marker" data-v-51e5a8ce></div><div class="outline-title" data-v-51e5a8ce>目录大纲</div><nav aria-labelledby="doc-outline-aria-label" data-v-51e5a8ce><span class="visually-hidden" id="doc-outline-aria-label" data-v-51e5a8ce> Table of Contents for current page </span><ul class="root" data-v-51e5a8ce><!--[--><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue2-0的object-defineproperty和vue3-0proxy对比" data-v-51e5a8ce>vue2.0的Object.defineProperty和vue3.0proxy对比</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue-项目时为什么要在列表组件中写-key，其作用是什么" data-v-51e5a8ce>Vue 项目时为什么要在列表组件中写 key，其作用是什么</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue实现数据双向绑定的原理是什么" data-v-51e5a8ce>Vue实现数据双向绑定的原理是什么?</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue-router-有哪几种导航守卫" data-v-51e5a8ce>vue-router 有哪几种导航守卫?</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue的路由实现：hash模式-和-history模式" data-v-51e5a8ce>Vue的路由实现：hash模式 和 history模式</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue3-x手写实现event-bus" data-v-51e5a8ce>Vue3.X手写实现Event Bus</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#自定义指令" data-v-51e5a8ce>自定义指令</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#插槽-v-slot" data-v-51e5a8ce>插槽 v-slot</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#slot插槽与slot作用域插槽的区别" data-v-51e5a8ce>slot插槽与slot作用域插槽的区别</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#说一下vue3-0你了解多少" data-v-51e5a8ce>说一下vue3.0你了解多少?</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue-computed-实现" data-v-51e5a8ce>Vue computed 实现</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vuex实现" data-v-51e5a8ce>Vuex实现</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue中虚拟dom和diff算法" data-v-51e5a8ce>vue中虚拟DOM和diff算法</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#为什么需要-virtual-dom" data-v-51e5a8ce>为什么需要 Virtual DOM</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#抽象语法树与虚拟节点的关系" data-v-51e5a8ce>抽象语法树与虚拟节点的关系</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue生命周期钩子是如何实现的" data-v-51e5a8ce>Vue生命周期钩子是如何实现的</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#请说明nexttick的原理" data-v-51e5a8ce>请说明nextTick的原理</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue-set方法是如何实现的" data-v-51e5a8ce>Vue.set方法是如何实现的</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#既然vue通过数据劫持可以精准的探测数据变化，为什么还要进行diff检测差异" data-v-51e5a8ce>既然vue通过数据劫持可以精准的探测数据变化，为什么还要进行diff检测差异</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#请描述组件的更新流程" data-v-51e5a8ce>请描述组件的更新流程</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#函数组件的优势和原理" data-v-51e5a8ce>函数组件的优势和原理</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#attrs是为了解决什么问题出现的" data-v-51e5a8ce>$attrs是为了解决什么问题出现的</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue-use的作用" data-v-51e5a8ce>Vue.use的作用</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#组件写name有啥好处" data-v-51e5a8ce>组件写name有啥好处</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue的修饰符有哪些" data-v-51e5a8ce>vue的修饰符有哪些</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#keep-alive平时在哪里使用-原理是什么" data-v-51e5a8ce>keep-alive平时在哪里使用?原理是什么?</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#谈谈vue的性能优化有哪些" data-v-51e5a8ce>谈谈Vue的性能优化有哪些?</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue中使用了哪些设计模式" data-v-51e5a8ce>vue中使用了哪些设计模式?</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#route和-router的区别" data-v-51e5a8ce>$route和$router的区别</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#自动加载文件夹下的组件为全局组件" data-v-51e5a8ce>自动加载文件夹下的组件为全局组件</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue3-0中-vue-extend报错解决" data-v-51e5a8ce>Vue3.0中,Vue.extend报错解决</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue3-0中-props-provide-inject-emit-动态加载-component-is" data-v-51e5a8ce>Vue3.0中 Props,provide/inject,Emit,动态加载(component :is)</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#vue中scoped穿透" data-v-51e5a8ce>Vue中scoped穿透</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-779d834d></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-79ca2460><div class="content-container" data-v-79ca2460><!--[--><!--]--><main class="main" data-v-79ca2460><div style="position:relative;" class="vp-doc _vitepress-notes_notes_Vue" data-v-79ca2460><div><div style="width:100%;height:50px;"></div><h1 id="📝-vue" tabindex="-1">📝 Vue <a class="header-anchor" href="#📝-vue" aria-hidden="true">#</a></h1><div style="width:100%;height:30px;"></div><h2 id="vue2-0的object-defineproperty和vue3-0proxy对比" tabindex="-1">vue2.0的Object.defineProperty和vue3.0proxy对比 <a class="header-anchor" href="#vue2-0的object-defineproperty和vue3-0proxy对比" aria-hidden="true">#</a></h2><p><strong><a href="https://zhuanlan.zhihu.com/p/341599531" target="_blank" rel="noopener noreferrer">深入学习Object.defineProperty和Proxy</a></strong></p><details class="details custom-block"><summary>Object.defineProperty</summary><blockquote><p><code>Object.defineProperty()</code>方法会直接在对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象</p></blockquote><div style="width:100%;height:20px;"></div><p><strong>1.</strong> <b>Object.defineProperty(obj, prop, descriptor)</b></p><ul><li>obj：要定义属性的对象。</li><li>prop：要定义或修改的属性的名称或 Symbol 。</li><li>descriptor：要定义或修改的属性描述符。</li></ul><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> user</span><span style="color:#89DDFF;">={};</span></span>
<span class="line"><span style="color:#FFCB6B;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineProperty</span><span style="color:#A6ACCD;">(user</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">value</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">xyz</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">configurable</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">writable</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">enumerable</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><div style="width:100%;height:20px;"></div><p><strong>2.</strong> <b>Object.defineProperty在劫持对象和数组的缺陷</b></p><ul><li>无法检测到对象属性的添加和删除</li><li>无法检测数组元素的变化,需要重写数组的方法</li></ul><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#82AAFF;">push</span><span style="color:#A6ACCD;">()  </span><span style="color:#82AAFF;">pop</span><span style="color:#A6ACCD;">()  </span><span style="color:#82AAFF;">shift</span><span style="color:#A6ACCD;">()  </span><span style="color:#82AAFF;">unshift</span><span style="color:#A6ACCD;">() </span><span style="color:#82AAFF;">reverse</span><span style="color:#A6ACCD;">() </span><span style="color:#82AAFF;">splice</span><span style="color:#A6ACCD;">() </span><span style="color:#82AAFF;">sort</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"></span></code></pre></div><ul><li>无法检测数组长度的修改 <div style="width:100%;height:20px;"></div></li></ul><details class="details custom-block"><summary>示例代码</summary><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">observe</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">obj</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 判断类型</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">obj</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">typeof</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">obj</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!==</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">object</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">return</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">keys</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">obj</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">k</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">defineReactive</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">k</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">obj</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">k</span><span style="color:#F07178;">])</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">defineReactive</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">val</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">observe</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">val</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineProperty</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">,{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">get</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(){</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">get</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">}`</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">val</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">set</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">newval</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">set</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">---</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">val</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">---&gt;</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">newval</span><span style="color:#89DDFF;">}`</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">div-</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">div-</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHTML</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">newval</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">val</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">newval</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> o</span><span style="color:#89DDFF;">={</span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">张三</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#82AAFF;">observe</span><span style="color:#A6ACCD;">(o)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">o</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">李四</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(o</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//监听输入框文本变化</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">oninputname</span><span style="color:#89DDFF;">(){</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">txt</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">input-name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">txt</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">o</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">txt</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//html</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">oninput</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">oninputname(event)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">input-name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">div-name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">aaa</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div></details></details><details class="details custom-block"><summary>Proxy</summary><div style="width:100%;height:10px;"></div><h4 id="相较于object-defineproperty劫持某个属性，proxy则更彻底，不在局限某个属性，而是直接对整个对象进行代理" tabindex="-1">相较于Object.defineProperty劫持某个属性，Proxy则更彻底，不在局限某个属性，而是直接对整个对象进行代理 <a class="header-anchor" href="#相较于object-defineproperty劫持某个属性，proxy则更彻底，不在局限某个属性，而是直接对整个对象进行代理" aria-hidden="true">#</a></h4><div style="width:100%;height:10px;"></div><h4 id="proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。" tabindex="-1">Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。 <a class="header-anchor" href="#proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。" aria-hidden="true">#</a></h4><div style="width:100%;height:10px;"></div><h4 id="var-proxy-new-proxy-target-handler" tabindex="-1"><span style="color:#cb4042;">var proxy = new Proxy(target, handler);</span> <a class="header-anchor" href="#var-proxy-new-proxy-target-handler" aria-hidden="true">#</a></h4><div style="width:100%;height:20px;"></div><blockquote><p>Proxy生成拦截的实例对象，让外界进行访问；构造函数中的target就是我们需要代理的目标对象，可以是对象或者数组；handler和Object.defineProperty中的descriptor描述符有些类似，也是一个对象，用来定制代理规则。</p></blockquote><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> target </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{}</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> proxyObj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Proxy</span><span style="color:#A6ACCD;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">    target</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">get</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> propKey</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> receiver</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">getting </span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">propKey</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">!</span><span style="color:#89DDFF;">`</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">propKey</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">receiver</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">set</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> propKey</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> value</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> receiver</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">setting </span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">propKey</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">!</span><span style="color:#89DDFF;">`</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">propKey</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">receiver</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">deleteProperty</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> propKey</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">delete </span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">propKey</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">!</span><span style="color:#89DDFF;">`</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">delete</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">propKey</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//setting count!</span></span>
<span class="line"><span style="color:#A6ACCD;">proxyObj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">count </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//getting count!</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//1</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(proxyObj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">count)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//delete count!</span></span>
<span class="line"><span style="color:#89DDFF;">delete</span><span style="color:#A6ACCD;"> proxyObj</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">count</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//或者</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> onWatch </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> setBind</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> getLogger</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">handler</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        get</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">property</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">receiver</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#82AAFF;">getLogger</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">property</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">property</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">receiver</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;">        set</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">property</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">receiver</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#82AAFF;">setBind</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">property</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">property</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">receiver</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Proxy</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">obj</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">handler</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> o</span><span style="color:#89DDFF;">={</span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">张三</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> p</span><span style="color:#89DDFF;">=</span><span style="color:#82AAFF;">onWatch</span><span style="color:#A6ACCD;">(o</span><span style="color:#89DDFF;">,(</span><span style="color:#A6ACCD;">k</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">v</span><span style="color:#89DDFF;">)</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">Set</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">k</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">---</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">v</span><span style="color:#89DDFF;">}`</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">div-</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">k</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">div-</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">k</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHTML</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">v</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">},(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> property</span><span style="color:#89DDFF;">)</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">Get &#39;</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">property</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">&#39; = </span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">target[property]</span><span style="color:#89DDFF;">}`</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">oninputname</span><span style="color:#89DDFF;">(){</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">txt</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">input-name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">txt</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">//o.name=txt;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">txt</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">get</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//html</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">oninput</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">oninputname(event)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">input-name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">div-name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">aaa</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"></span></code></pre></div><div style="width:100%;height:10px;"></div><p><code>Reflect.get()</code>方法用于允许用户从对象获取函数的属性。此方法始终返回属性的值</p><p><code>Reflect.get(target, propertyKey, receiver)</code></p><p><code>const object = { val1 : 1, val2 : 2 };</code></p><p><code>console.log(Reflect.get(object, &#39;val1&#39;)); //1</code></p><div style="width:100%;height:10px;"></div><p>可以看到Proxy直接代理了<code>target</code>整个对象，并且返回了一个新的对象，通过监听代理对象上属性的变化来获取目标对象属性的变化；而且我们发现Proxy不仅能够监听到属性的增加，还能监听属性的删除，比<code>Object.defineProperty</code>的功能更为强大。</p><div style="width:100%;height:20px;"></div><details class="details custom-block"><summary>示例代码</summary><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> obj</span><span style="color:#89DDFF;">={</span><span style="color:#F07178;">text</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> proxy_obj</span><span style="color:#89DDFF;">=new</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Proxy</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">get</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">revice</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">get text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">revice</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">set</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">revice</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">set text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">==</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">spaninp2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHTML</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">revice</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div></details></details><h2 id="vue-项目时为什么要在列表组件中写-key，其作用是什么" tabindex="-1">Vue 项目时为什么要在列表组件中写 key，其作用是什么 <a class="header-anchor" href="#vue-项目时为什么要在列表组件中写-key，其作用是什么" aria-hidden="true">#</a></h2><blockquote><p>vue采用diff算法来对比新旧虚拟节点,从而更新节点.在diff算法对比中,如果有key的话,会创建一个map映射,然后根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点,如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。</p></blockquote><h2 id="vue实现数据双向绑定的原理是什么" tabindex="-1">Vue实现数据双向绑定的原理是什么? <a class="header-anchor" href="#vue实现数据双向绑定的原理是什么" aria-hidden="true">#</a></h2><ol><li>实现一个监听者Observe来劫持并监听所有的属性,一旦有属性发生变化就通知订阅者</li><li>实现一个订阅者watcher来接收属性变化的通知并执行相应的方法,从而更新视图</li><li>实现一个解析器Compile,可以扫描和解析每个节点的相关指令,初始化模板数据和初始化相应的订阅者 <p><img src="/vitepress-notes/assets/1.941f95a9.jpg" style="width:90%;"></p></li></ol><h2 id="vue-router-有哪几种导航守卫" tabindex="-1">vue-router 有哪几种导航守卫? <a class="header-anchor" href="#vue-router-有哪几种导航守卫" aria-hidden="true">#</a></h2><ul><li><p>全局守卫</p><ul><li>beforeEach(to, from, next) 全局前置守卫，路由跳转前触发</li><li>beforeResolve(to, from, next)全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发</li><li>afterEach(to, from)全局后置守卫，路由跳转完成后触发</li></ul></li><li><p>路由独享守卫</p><ul><li>beforeEnter(to,from,next) 路由对象单个路由配置 ，你可以在路由配置直接定义beforeEnter守卫，这些参数与全局前置守卫的方法参数是一样的</li></ul><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">//router/index.js</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> router </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">VueRouter</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">routes</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/foo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> Foo</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">beforeEnter</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">to</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> from</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> next</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// ...</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre></div></li><li><p>组件路由守卫</p><ul><li>beforeRouteEnter 进入路由前, 在路由独享守卫后调用 ,不能 获取组件实例 this，组件实例还没被创建</li><li>beforeRouteUpdate 当前路由改变时触发,路由复用同一个组件时, 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 this</li><li>beforeRouteLeave 离开当前路由时, 导航离开该组件的对应路由时调用，可以访问组件实例 this</li></ul></li></ul><h2 id="vue的路由实现：hash模式-和-history模式" tabindex="-1">Vue的路由实现：hash模式 和 history模式 <a class="header-anchor" href="#vue的路由实现：hash模式-和-history模式" aria-hidden="true">#</a></h2><p><strong>hash</strong></p><blockquote><p>hash指的是location里面#以及它后面的部分。也被成为锚点，通常用来定位，它的改变不会造成页面的刷新。  我们可以通过window.location.hash来获取当前的hash值。<span style="color:#e07d26;">hash模式主要原理是浏览器自带的一个hashchange事件。hash模式兼容性好，但是不美观，不利于SEO</span></p></blockquote><p><strong>history</strong></p><blockquote><p>history模式是通过调用window.history对象上的一系列方法来实现页面的无刷新跳转。当history发生改变时会触发popState事件。（仅仅调用pushState和replaceState方法时，并不会触发该事件； 页面第一次加载时也不会触发该事件。）<span style="color:#e07d26;">history美观，historyAPI+popState，但是刷新会出现404</span></p></blockquote><p><strong>abstract在不支持浏览器的API换景使用</strong></p><h2 id="vue3-x手写实现event-bus" tabindex="-1">Vue3.X手写实现Event Bus <a class="header-anchor" href="#vue3-x手写实现event-bus" aria-hidden="true">#</a></h2><details class="details custom-block"><summary>示例代码</summary><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">//vue2中实现event bus</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Vue </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Vue</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//组件中引入</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Bus </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">../bus.js</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">Bus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">$emit</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">on</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">来自兄弟组件</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">Bus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">$on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">on</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">msg</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">msg</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//vue3手写实现</span></span>
<span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Bus</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#C792EA;">constructor</span><span style="color:#89DDFF;">(){</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">list</span><span style="color:#89DDFF;">={};</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">$on</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">fn</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">list</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">=this.</span><span style="color:#A6ACCD;">list</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> []</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">list</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">fn</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">$emit</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">list</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">])</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">list</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">callback</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">data</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">$off</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">list</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">])</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">delete</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">list</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> Bus</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//bus.ts</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Bus </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Bus.ts</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Bus</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//组件使用</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> bus </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">bus.ts</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">bus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">$on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">demo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,(</span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">:</span><span style="color:#FFCB6B;">any</span><span style="color:#89DDFF;">)</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">data</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">bus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">$emit</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">demo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">测试数据</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">bus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">$off</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">demo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div></details><h2 id="自定义指令" tabindex="-1">自定义指令 <a class="header-anchor" href="#自定义指令" aria-hidden="true">#</a></h2><details class="details custom-block"><summary>自定义指令就是用户自己定义一些命令用来操作底层dom</summary><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">//关键字:directives</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//Vue2写法</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//钩子函数</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//初始化的时候执行一次</span></span>
<span class="line"><span style="color:#82AAFF;">bind</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">{}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//inserted,被绑定元素插入父节点的时候调用</span></span>
<span class="line"><span style="color:#82AAFF;">inserted</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">{}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//所在组件的 VNode 更新时调用</span></span>
<span class="line"><span style="color:#82AAFF;">update</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">{}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//指令所在组件的 VNode 及其子 VNode 全部更新后调用</span></span>
<span class="line"><span style="color:#82AAFF;">componentUpdated</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">{}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//unbind：只调用一次，指令与元素解绑时调用</span></span>
<span class="line"><span style="color:#82AAFF;">unbind</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">{}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//v-focus</span></span>
<span class="line"><span style="color:#FFCB6B;">directives</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">el</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">#app</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">focus</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#82AAFF;">inserted</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">el</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">binding</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">el</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">el</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">focus</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//例子:</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-highlight</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">&#39;yellow&#39;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">以亮黄色高亮显示此文本</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">directive</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">highlight</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">bind</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">el</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> binding</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> vnode</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">el</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">background</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">binding</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//Vue3变化</span></span>
<span class="line"><span style="color:#A6ACCD;">created </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> 新增！在元素的 attribute 或事件监听器被应用之前调用。</span></span>
<span class="line"><span style="color:#A6ACCD;">bind → beforeMount</span></span>
<span class="line"><span style="color:#A6ACCD;">inserted → mounted</span></span>
<span class="line"><span style="color:#A6ACCD;">beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。</span></span>
<span class="line"><span style="color:#A6ACCD;">update → 移除！该钩子与 updated 有太多相似之处，因此它是多余的。请改用 updated。</span></span>
<span class="line"><span style="color:#A6ACCD;">componentUpdated → updated</span></span>
<span class="line"><span style="color:#A6ACCD;">beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。</span></span>
<span class="line"><span style="color:#A6ACCD;">unbind </span><span style="color:#89DDFF;">-&gt;</span><span style="color:#A6ACCD;"> unmounted</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//api</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> MyDirective </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">created</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">el</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> binding</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> vnode</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> prevVnode</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 新增</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">beforeMount</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">mounted</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">beforeUpdate</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 新增</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">updated</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">beforeUnmount</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 新增</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">unmounted</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//例子:</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-highlight</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">&#39;yellow&#39;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">以亮黄色高亮显示此文本</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> app </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createApp</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">directive</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">highlight</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">beforeMount</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">el</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> binding</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> vnode</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">el</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">background</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">binding</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre></div></details><h2 id="插槽-v-slot" tabindex="-1">插槽 v-slot <a class="header-anchor" href="#插槽-v-slot" aria-hidden="true">#</a></h2><details class="details custom-block"><summary>示例代码</summary><div class="language-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">//child</span></span>
<span class="line"><span style="color:#A6ACCD;">//匿名插槽</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">slot</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">slot</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">slot</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">slot</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">//具名插槽</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">slot</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">aaa</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">slot</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">//作用域插槽</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">(n,i) in names</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">n</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">slot</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">name_list</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:index</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">i</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:data</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">n</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">slot</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">//parent</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">router-view</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-slot</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">{ Component }</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:names</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">keep-alive</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">include</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">aa</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">component</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:is</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Component</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">哈哈哈哈哈</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">#aaa</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">我我我我哦我</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-slot:name_list</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">slotProps</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          Id:{{slotProps.index}}- </span></span>
<span class="line"><span style="color:#A6ACCD;">          姓名:{{slotProps.data}}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">keep-alive</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">router-view</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div></details><p><img src="/vitepress-notes/assets/2.a6d205b6.png"></p><h2 id="slot插槽与slot作用域插槽的区别" tabindex="-1">slot插槽与slot作用域插槽的区别 <a class="header-anchor" href="#slot插槽与slot作用域插槽的区别" aria-hidden="true">#</a></h2><p>插槽就是在子组件里做定制化内容，当一个复用的组件内有一部分需要针对不同的场景有所差异，且无规律可循时，我们就可以使用<code>&lt;slot&gt;&lt;/slot&gt;</code>让父组件自定义内容。</p><ul><li>这种时候又可以分为两个场景： <ul><li><ol><li>内容与子组件内的数据无关</li></ol></li><li><ol start="2"><li>内容与子组件内的数据有关</li></ol></li></ul></li></ul><p>前者使用普通插槽，后者使用作用域插槽，作用域插槽的作用就是拿到子组件的数据</p><div class="tip custom-block"><p class="custom-block-title">普通插槽</p><p>在父组件初始化期间会编译成文本子节点存起来，在子组件渲染的时候直接将插槽替换成父组件里渲染的节点</p></div><div class="tip custom-block"><p class="custom-block-title">作用域插槽</p><p>在父组件初始化期间会编译成一个函数，在子组件初始化的时候执行这个函数生成vnode再进行渲染</p></div><h2 id="说一下vue3-0你了解多少" tabindex="-1">说一下vue3.0你了解多少? <a class="header-anchor" href="#说一下vue3-0你了解多少" aria-hidden="true">#</a></h2><ul><li>响应式原理的改变 Vue3.x 使用Proxy取代 Vue2.x 版本的Object.defineProperty</li><li>组件选项声明方式Vue3.x 使用Composition API setup 是Vue3.x新增的一个选项，他 是组件内使用Composition API 的入口(添加了组合式API)</li><li>模板语法变化slot具名插槽语法 自定义指令 v-model 升级</li><li>其它方面的更改Suspense支持Fragment(多个根节点) 和Protal (在dom其他部分渲染组建内容)组件 针对一些特殊的场景做了处理。基于treeshaking优化，提供了更多的内置功能。</li></ul><h2 id="vue-computed-实现" tabindex="-1">Vue computed 实现 <a class="header-anchor" href="#vue-computed-实现" aria-hidden="true">#</a></h2><ul><li><p>初始化 data， 使用 Object.defineProperty 把这些属性全部转为 getter/setter。</p></li><li><p>初始化 computed, 遍历 computed 里的每个属性，每个 computed 属性都是一个 watch 实例。每个属性提供的函数作为属性的 getter，使用 Object.defineProperty 转化。</p></li><li><p>Object.defineProperty getter 依赖收集。用于依赖发生变化时，触发属性重新计算。</p></li><li><p>若出现当前 computed 计算属性嵌套其他 computed 计算属性时，先进行其他的依赖收集。</p></li></ul><h2 id="vuex实现" tabindex="-1">Vuex实现 <a class="header-anchor" href="#vuex实现" aria-hidden="true">#</a></h2><p><a href="https://juejin.cn/post/7079239065278611486" target="_blank" rel="noopener noreferrer">Vuex核心源码解析之手写Vuex</a></p><p><code>vuex</code> 是个状态管理模式，其<code>基本工作流程</code>是：当用户修改状态的时候，如果是 <code>同步</code> 修改状态，会先提交<code>（commit）</code>触发 <code>mutations方法</code>，改变 <code>Store实例中的状态</code>，这也是 <code>唯一</code> 修改状态的途径，如果是 <code>异步</code> 的修改状态的方法，比如发起数据请求等，会提交 <code>dispatch</code> 触发 <code>actions方法</code>，然后在 <code>actions方法</code> 中通过 <code>commit</code> 触发 <code>mutations方法</code> 进而 <code>更新Store实例的状态</code>，然后再将 <code>状态更新</code> 到 <code>Vue组件中</code>。如果我们的项目是大型的单页面应用，那么我们就需要使用vuex在组件外部管理状态，通过这个状态管理模式我们可以很轻松的<code>实现组件之间的通信</code>，这也是选择vuex的原因之一，当然vuex也有自己的缺陷，就是状态不能够持久化。</p><p><code>Vuex实现响应式原理</code> 通过在 <code>install方法</code> 内通过 vue的 <code>mixin方法</code> 将 <code>Store实例</code> 注入到每个组件内，在 <code>resetStoreVm方法</code>内部主要是借助 <code>vue本身的响应式原理</code> 来实现状态的响应式，借助<code>computed</code>来实现 <code>getters的缓存</code> 效果，然后通过 <code>发布订阅的思想</code> 将用户定义的 <code>mutations</code> 和 <code>actions</code> 方法存储起来，当用户触发 <code>commit</code>、<code>dispatch</code> 的时候就去 <code>订阅mutations</code> 和 <code>actions</code> 找出对应的方法。如果存在 <code>模块嵌套</code> 的情况下，首先，vuex内部会通过一个 <code>moduleCollection类</code> 将所有模块 <code>格式化</code> 为一个 <code>树形结构</code>，其次，通过 <code>installModule方法</code> 将格式化好的树形结构 <code>安装</code> 到 <code>Store实例上</code>，最后，通过 <code>resetStoreVm方法</code> 借助 <code>vue内部响应式的原理</code> 将所有模块的状态都置为 <code>响应式</code>。vuex是 <code>响应式</code> 的同时还支持 <code>插件</code> 的使用，Store内部有 <code>subscribe方法</code> 和 <code>replaceState方法</code>，通过这两个方法我们实现 <code>vuex的状态的持久化</code>，以上说明了 vuex是高度依赖 <code>vue响应式</code> 和 <code>插件系统的</code>。</p><h2 id="vue中虚拟dom和diff算法" tabindex="-1">vue中虚拟DOM和diff算法 <a class="header-anchor" href="#vue中虚拟dom和diff算法" aria-hidden="true">#</a></h2><p>在Javascript中，渲染 <code>真实DOM</code> 的开销是非常大的，比如我们修改了某个数据，如果直接渲染到 真实DOM，会引起整个 DOM树 的 <code>回流和重绘</code>。那么有没有可能实现只更新我们修改的那一小块DOM而不会引起整个DOM更新？此时我们就需要先根据 <code>真实DOM</code> 生成 <code>虚拟DOM</code> ，当 <code>虚拟DOM</code> 某个节点的数据改变后会生成一个 <code>新的Vnode</code>，然后 <code>新的Vnode</code> 和 <code>旧的Vnodde</code> 进行比较，发现有不一样的地方就直接修改到 <code>真实DOM 上</code>，然后使 <code>旧的Vnode</code> 的值变成 <code>新的Vnode</code>。</p><p><code>diff算法</code> 的过程就是 <code>patch函数</code> 的调用，比较新旧节点，一边比较一边给 真实的DOM 打补丁。在采用 <code>diff算法</code> 比较新旧节点的时候，<code>只会进行同层级的比较</code>。在 <code>patch方法</code> 中，首先比较<code>新旧虚拟节</code>点是否是同一个节点，<code>如果不是同一个节点</code>，那么就会将旧的节点删除掉，插入新的虚拟节点，然后再使用 <code>createElement函数</code> 创建 真实DOM，渲染到真实的 DOM树。<code>如果是同一个节点</code>，使用 <code>patchVnode函数</code> 比较新旧节点，包括属性更新、文本更新、子节点更新，新旧节点均有子节点，则需要进行 <code>diff算法</code>，调用<code>updateChildren方法</code>，如果新节点没有文本内容而旧节点有文本内容，则需要将旧节点的文本删除，然后再增加子节点，如果新节点有文本内容，则直接替换旧节点的文本内容。<code>updateChildren方法</code> 将新旧节点的子节点都提取出来，然后使用的是 <code>双指针</code> 的方式进行<code>四种优化策略</code>循环比较。分别是：<code>①、新前与旧前比较 ②、新后与旧后比较 ③、新后与旧前比较 ④、新前与旧后比较。</code>如果四种优化策略方法均没有命中，则会进行遍历方法进行比较（<code>源码中使用了Map对象进行了缓存，加快了比较的速率</code>），如果设置了 key，就会使用<code>key</code>进行比较，找到当前的新节点的子节点在 <code>Map 中的映射位置</code>，如果<code>不存在，则需要添加节点</code>，<code>存在则需要移动节点</code>。最后，循环结束之后，如果<code>新节点还有剩余节点</code>，则说明需要<code>添加节点</code>，如果<code>旧节点还有剩余节点</code>，则说明需要<code>删除节点</code>。</p><p><span style="background-color:#f7e2e3;">Vue的diff算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方式+双指针方式比较</span></p><h2 id="为什么需要-virtual-dom" tabindex="-1">为什么需要 Virtual DOM <a class="header-anchor" href="#为什么需要-virtual-dom" aria-hidden="true">#</a></h2><p>虚拟dom就是用js对象来描述真实Dom，是对真实Dom的抽象</p><p>首先，我们都知道，在前端性能优化的一个秘诀就是尽可能的<code>减少DOM的操作</code>，不仅仅是DOM相对较慢，更是因为变动DOM会造成浏览器的<code>回流和重绘</code>，这些都会降低性能，因此，我们需要虚拟DOM，在<code>patch（比较新旧虚拟DOM更新去更新视图）</code>过程中尽可能的<code>一次性将差异更新到DOM中</code>，这样就保证了DOM不会出现了性能很差的情况。</p><p>其次，使用 <code>虚拟DOM</code> 改变了当前的状态不需要立即去更新DOM，而是对更新的内容进行更新，对于没有改变的内容不做任何处理，通过<code>前后两次差异进行比较</code>。</p><p>最后，也是Virtual DOM 最初的目的，就是更好的<code>跨平台</code>，比如node.js就没有DOM，如果想实现 <code>SSR（服务端渲染）</code>，那么一个方式就是借助Virtual DOM，因为 Virtual DOM本身是 JavaScript对象。</p><h2 id="抽象语法树与虚拟节点的关系" tabindex="-1">抽象语法树与虚拟节点的关系 <a class="header-anchor" href="#抽象语法树与虚拟节点的关系" aria-hidden="true">#</a></h2><p><code>虚拟DOM</code> 其实就是一个普通的JS对象，是为了提高页面渲染的性能而存在的。<code>虚拟DOM</code> 是通过 <code>h函数</code> 生产一个虚拟状态的DOM,然后根据虚拟节点进行渲染，首次渲染的就会直接渲染，但是二次往后的话就是进行 <code>虚拟DOM的对比</code>，只更新不同的地方。</p><p>换成AST的是Vue模板，Vue需要根据模版去处理各种插值、指令；生成虚拟DOM的是最终要展示在页面上的内容的对象描述，Vue 每次需要通过 <code>diff算法</code> 对比 <code>新旧虚拟DOM</code> 的差异；</p><p>固定模版生成的AST是不变的，虚拟DOM是不断变化、需要进行差异对比的（数据等会变）。</p><p><code>渲染函数</code>（h函数）,它既是<code>AST的产物</code>，也是<code>vnode(虚拟节点)的起源</code>。h函数里面是不含指令的。</p><p>模板语法先转换成<code>抽象语法树</code>，然后抽象语法树最后会直接变成 <code>渲染函数（h函数）</code>。而 <code>渲染函数</code> 的执行会生成 <code>虚拟节点</code>，<code>虚拟节点</code> 经过 <code>diff</code>等算法，将 <code>虚拟DOM</code> 变成 <code>真实DOM</code> 从而在页面进行展示。</p><p><img src="/vitepress-notes/assets/3.5556b37d.webp" style="width:100%;"></p><h2 id="vue生命周期钩子是如何实现的" tabindex="-1">Vue生命周期钩子是如何实现的 <a class="header-anchor" href="#vue生命周期钩子是如何实现的" aria-hidden="true">#</a></h2><p>Vue的各生命周期，其实就是Vue开发者规定的一些hook，简单来说，hook其实就是一种回调函数，只不过这种回调函数的名称已经被固定,当创建组件实例的过程中会调用相应的钩子方法。 内部会对钩子进行处理，将钩子函数维护成数组的形式。</p><h2 id="请说明nexttick的原理" tabindex="-1">请说明nextTick的原理 <a class="header-anchor" href="#请说明nexttick的原理" aria-hidden="true">#</a></h2><p>nextTick是一个微任务。</p><p>nextTick中的回调是在下次Dom更新循环结束之后执行的延迟回调</p><p>可以用于获取更新后的Dom</p><p>Vue中的数据更新是异步的，使用nextTick可以保证用户定义的逻辑在更新之后执行</p><h2 id="vue-set方法是如何实现的" tabindex="-1">Vue.set方法是如何实现的 <a class="header-anchor" href="#vue-set方法是如何实现的" aria-hidden="true">#</a></h2><p>首先，判断在非生产环境，传入的target如果是<code>undefined</code>、<code>null</code>或是原始类型，则直接跑出错误。</p><p>如果传入的是一个数组的话，就会调用数组的splice方法进行实现响应式</p><p>如果不是一个数组，就当做对象来处理，先判断当前key在源对象是否存在，如果存在，说明当前key已经是响应式的，就直接进行操作对应的动作。如果key不在源对象中，就调用Object.defineReactive方法将该key添加到源对象上，并且实现了响应式</p><h2 id="既然vue通过数据劫持可以精准的探测数据变化，为什么还要进行diff检测差异" tabindex="-1">既然vue通过数据劫持可以精准的探测数据变化，为什么还要进行diff检测差异 <a class="header-anchor" href="#既然vue通过数据劫持可以精准的探测数据变化，为什么还要进行diff检测差异" aria-hidden="true">#</a></h2><p>响应式数据变化，Vue确实可以在数据变化的时候，响应式系统可以立刻得知。但是如何每个属性都添加watcher的话，性能会非常的差。</p><p>粒度过细，会导致更新不精准</p><p>所以采用watcher + Diff算法来检测差异。</p><h2 id="请描述组件的更新流程" tabindex="-1">请描述组件的更新流程 <a class="header-anchor" href="#请描述组件的更新流程" aria-hidden="true">#</a></h2><p>属性更新会触发patchVnode方法，组件的虚拟节点会调用prepatch钩子，然后更新属性，更新组件。</p><h2 id="函数组件的优势和原理" tabindex="-1">函数组件的优势和原理 <a class="header-anchor" href="#函数组件的优势和原理" aria-hidden="true">#</a></h2><p>函数式组件的特性：无状态、无生命周期、无this。因此性能会高一点。</p><p>正常的一个组件是一个类继承了Vue。</p><p>函数式组件，就是一个普通的函数。</p><h2 id="attrs是为了解决什么问题出现的" tabindex="-1">$attrs是为了解决什么问题出现的 <a class="header-anchor" href="#attrs是为了解决什么问题出现的" aria-hidden="true">#</a></h2><p>主要作用是为了实现批量传递数据。</p><p>provide/inject更适合应用在插件中，主要实现跨级数据传递。</p><h2 id="vue-use的作用" tabindex="-1">Vue.use的作用 <a class="header-anchor" href="#vue-use的作用" aria-hidden="true">#</a></h2><p>Vue.use是用来安装插件的,如果插件是个对象,则需要暴露一个<code>install()</code>方法,如果插件本身就是一个函数,则它将被视为 <code>install</code> 方法.install方法会将应用实例作为第一个参数被调用.</p><p>我们可以在插件中扩展全局组件、指令、原型方法等</p><h2 id="组件写name有啥好处" tabindex="-1">组件写name有啥好处 <a class="header-anchor" href="#组件写name有啥好处" aria-hidden="true">#</a></h2><ul><li><p>增加name属性，会在components属性中增加组件本身，实现组件的递归调用。</p></li><li><p>可以表示组件的具体名称，方便调试和查找对应的组件。比如当项目使用keep-alive时，可搭配组件name进行缓存过滤</p></li></ul><p><img src="/vitepress-notes/assets/4.f13627ad.png" style="width:90%;"></p><h2 id="vue的修饰符有哪些" tabindex="-1">vue的修饰符有哪些 <a class="header-anchor" href="#vue的修饰符有哪些" aria-hidden="true">#</a></h2><ul><li><p>.stop</p></li><li><p>.prevent</p></li><li><p>.capture</p></li><li><p>.self</p></li><li><p>.once</p></li><li><p>.passive</p></li><li><p>.right</p></li><li><p>.center</p></li><li><p>.middle</p></li><li><p>.alt</p></li></ul><p><strong>v-model的修饰符</strong></p><ul><li><p><code>.lazy</code> - 监听 <code>change</code> 而不是 <code>input</code> 事件</p></li><li><p><code>.number</code> - 输入字符串转为有效的数字</p></li><li><p><code>.trim</code> - 输入首尾空格过滤</p></li></ul><h2 id="keep-alive平时在哪里使用-原理是什么" tabindex="-1">keep-alive平时在哪里使用?原理是什么? <a class="header-anchor" href="#keep-alive平时在哪里使用-原理是什么" aria-hidden="true">#</a></h2><p>使用keep-alive包裹动态组件时，会对组件进行缓存，避免组件重新创建</p><p>使用有两个场景，一个是动态组件，一个是router-view</p><p>缓存的是组件的实例，用key和value对象保存。</p><p>加载的时候，监控include和exclude。</p><p>如果不需要缓存，直接返回虚拟节点。</p><p>如果需要缓存，就用组件的id和标签名，生成一个key，把当前vnode的instance作为value，存成一个对象。这就是缓存列表</p><p>如果设置了最大的缓存数，就删除第0个缓存。新增最新的缓存</p><h2 id="谈谈vue的性能优化有哪些" tabindex="-1">谈谈Vue的性能优化有哪些? <a class="header-anchor" href="#谈谈vue的性能优化有哪些" aria-hidden="true">#</a></h2><ul><li><p>数据层级不要过深，合理的设置响应式数据</p></li><li><p>使用数据时，缓存值的结果，不频繁取值</p></li><li><p>合理设置key</p></li><li><p>v-show(频繁切换性能高)和v-if的合理使用</p></li><li><p>控制组件的粒度 -&gt; Vue采用组件级别更新</p></li><li><p>采用函数式组件 -&gt; 函数式组价开销低</p></li><li><p>采用异步组件 -&gt; 借助webpack的分包策略</p></li><li><p>使用keep-alive来缓存组件</p></li><li><p>虚拟滚动、时间分片等策略</p></li><li><p>打包优化</p></li></ul><h2 id="vue中使用了哪些设计模式" tabindex="-1">vue中使用了哪些设计模式? <a class="header-anchor" href="#vue中使用了哪些设计模式" aria-hidden="true">#</a></h2><ul><li><p>单例模式：new多次，只有一个实例</p></li><li><p>工厂模式：传入参数就可以创建实例(虚拟节点的创建)</p></li><li><p>发布订阅模式：eventBus</p></li><li><p>观察者模式：watch和dep</p></li><li><p>代理模式：_data属性、proxy、防抖、节流</p></li><li><p>中介者模式：vuex</p></li><li><p>策略模式</p></li><li><p>外观模式</p></li></ul><h2 id="route和-router的区别" tabindex="-1">$route和$router的区别 <a class="header-anchor" href="#route和-router的区别" aria-hidden="true">#</a></h2><p><code>$route</code> 是路由信息对象，包括<code>path</code>，<code>params</code>，<code>hash</code>，<code>query</code>，<code>fullPath</code>，<code>matched</code>，<code>name</code> 等路由信息参数。</p><p>而 <code>$router</code> 是路由实例对象，包括了路由的跳转方法，钩子函数等</p><h2 id="自动加载文件夹下的组件为全局组件" tabindex="-1">自动加载文件夹下的组件为全局组件 <a class="header-anchor" href="#自动加载文件夹下的组件为全局组件" aria-hidden="true">#</a></h2><details class="details custom-block"><summary>自动加载文件夹下的组件为全局组件</summary><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">install</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">app</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//webpack</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// const requireContext=require.context(&#39;./&#39;,false,/\.vue$/);</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// requireContext.keys().forEach(comp=&gt;{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//     const vueComp=requireContext(comp);</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//     const compName=vueComp.name?vueComp.name.toLowerCase():/\/([\w-]+)\.vue$/.exec(comp)[1];</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//     app.component(compName,vueComp.default);</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// });</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//vite</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">requireContext</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">meta</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">globEager</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./*.vue</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">requireContext</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#F07178;">(</span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">in</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">requireContext</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">compName</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\/</span><span style="color:#89DDFF;">([</span><span style="color:#C3E88D;">\w-</span><span style="color:#89DDFF;">]+)</span><span style="color:#A6ACCD;">\.</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">exec</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">)[</span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">component</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">compName</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">requireContext</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div></details><h2 id="vue3-0中-vue-extend报错解决" tabindex="-1">Vue3.0中,Vue.extend报错解决 <a class="header-anchor" href="#vue3-0中-vue-extend报错解决" aria-hidden="true">#</a></h2><details class="details custom-block"><summary>Vue3.0中,Vue.extend报错解决</summary><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">//导入loading.vue组件</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> loading </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./loading.vue</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//vue3新增</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">createApp</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">install</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">app</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">loading</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">body</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">removeChild</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">loading</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//vue2代码</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//let loadTpl=Vue.extend(loading);</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// var tpl=new loadTpl();</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// document.body.appendChild(tpl.$mount().$el);</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// Vue.prototype.$loading=(visible)=&gt;{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//     tpl.$mount().visible=visible || false;</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">divElement</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">div</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">divElement</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">loading</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">body</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">divElement</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">vueCom</span><span style="color:#89DDFF;">=</span><span style="color:#82AAFF;">createApp</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">loading</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">mount</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#loading</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">config</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">glibalProerties</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">$loading</span><span style="color:#89DDFF;">=(</span><span style="color:#A6ACCD;">visible</span><span style="color:#89DDFF;">)</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">vueCom</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">visible</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">visible</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"></span></code></pre></div></details><h2 id="vue3-0中-props-provide-inject-emit-动态加载-component-is" tabindex="-1">Vue3.0中 Props,provide/inject,Emit,动态加载(component :is) <a class="header-anchor" href="#vue3-0中-props-provide-inject-emit-动态加载-component-is" aria-hidden="true">#</a></h2><details class="details custom-block"><summary>Vue3.0中 Props,provide/inject,Emit,动态加载(component :is)</summary><div class="language-js"><span class="copy"></span><pre><code><span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//props,emit</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">component</span><span style="color:#89DDFF;"> :is=&quot;coms&quot; :h_props=&quot;h_props&quot; @updateProps=&quot;updateProps&quot;&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/component&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//子组件 setup</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#89DDFF;"> {</span><span style="color:#A6ACCD;">h_props</span><span style="color:#89DDFF;">}=defineProps({h_props});</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">emit</span><span style="color:#89DDFF;">=defineEmits([&#39;updateProps&#39;]);</span></span>
<span class="line"><span style="color:#89DDFF;">emit(&#39;updateProps&#39;,args);</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//provide--inject</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//父组件setup,需要引入provide</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">provides</span><span style="color:#89DDFF;">=(arg)=&gt;{</span></span>
<span class="line"><span style="color:#89DDFF;">    console.log(arg);</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">provide(&#39;provides&#39;,provides);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//子组件,引入inject</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">_inject</span><span style="color:#89DDFF;">=inject(&#39;provides&#39;);</span></span>
<span class="line"><span style="color:#89DDFF;">_inject(&quot;xxxxxx&quot;);</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//component :is</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//第一种</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;component :is=&quot;coms&quot; /&gt;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> A</span><span style="color:#89DDFF;">=</span><span style="color:#82AAFF;">markRaw</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">defineAsyncComponent</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./a.vue</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> B</span><span style="color:#89DDFF;">=</span><span style="color:#82AAFF;">markRaw</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">defineAsyncComponent</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./b.vue</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> coms</span><span style="color:#89DDFF;">=</span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(A)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onChange</span><span style="color:#89DDFF;">=()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">coms</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">B</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//第二种</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">component</span><span style="color:#89DDFF;"> :is=&quot;vueComs.get(coms2)&quot; /&gt;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> vueComs</span><span style="color:#89DDFF;">=</span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Map</span><span style="color:#A6ACCD;">())</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">vueComs</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">A</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">defineAsyncComponent</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./a.vue</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">vueComs</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">B</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">defineAsyncComponent</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./b.vue</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> coms2</span><span style="color:#89DDFF;">=</span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">A</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onChange2</span><span style="color:#89DDFF;">=()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">coms2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">B</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"></span></code></pre></div></details><h2 id="vue中scoped穿透" tabindex="-1">Vue中scoped穿透 <a class="header-anchor" href="#vue中scoped穿透" aria-hidden="true">#</a></h2><details class="details custom-block"><summary>Vue中scoped穿透</summary><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">/*  1.style中使用 &gt;&gt;&gt; 穿透  */</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#A6ACCD;"> &gt;&gt;&gt; </span><span style="color:#FFCB6B;">input</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/*  2.sass或less中,使用/deep/   */</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	/deep/ input{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"></span></code></pre></div></details><!--[--><div id="btn-top" class="btn-show btn-top"> TOP </div><div id="btn-show" class="btn-show">展开</div><!--]--></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><!----></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/vitepress-notes/notes/Js.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>📝 Js</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/vitepress-notes/notes/Webpack.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>📝 Webpack</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"51692ccb\",\"notes_git.md\":\"b70506d6\",\"notes_html-css.md\":\"20fcd46e\",\"notes_js.md\":\"314f64b6\",\"notes_vue.md\":\"8797bdcd\",\"notes_webpack.md\":\"0b30deeb\",\"notes_uniapp.md\":\"1a484b89\",\"notes_正则.md\":\"4696d86d\",\"notes_面试题大全.md\":\"64f2cd1e\",\"notes2_html.md\":\"50cc4b26\"}")</script>
    <script type="module" async src="/vitepress-notes/assets/app.04fdf0c1.js"></script>
    
  </body>
</html>